Starting with Structure - etc

I tried to view this file with Firefox. The address bar displayed file:///C:/Program%20Files%20(x86)/Ampps/www/!HTML_Prac/134_.html

The heading looks like this



in Firefox. Note that last part of the title bar is missed because it is displayed as half page. In the address bar I typed : 'C:\Program Files (x86)\Ampps\www\!HTML_Prac\134_.html'.

There is an extensive discussion of the roles of <header>, <nav>, <main>, <article>, <footer>, <address>, <session>, and <aside> tags on pages 53-72.

Creating Generic Containers (ECLoc2557 P73) starts into using <div> element.

ECLoc2604 P75 'Improving Accessibility with ARIA' describes how one may learn landmark roles with div

WAI-ARIA (Web Accessibility Initiative’s Accessible Rich Internet Applications), or ARIA for short, is a specification that declares itself “a bridging technology.” That is, it fills semantic gaps with attributes you can use in your pages until languages like HTML provide their own equivalent semantics. ECLoc2866

div had no semantic meaning, and it still doesn't today. That is why HTML5 introduced header, footer, main, article, section, aside, and nav. ECLoc2675 gives example for div

The four displays which follow do not have specific meaning to the subject discussed. I created these for testing the placement of the image. The first one uses margin-left with span. The second one uses display block, margin-left: auto, margin-right: auto with span. The third one is like the second one, but it does not use span, only width: 50%, and the last one is the same as the third one, but it uses height: 50%.

It may be noted that on half page the positioning of the second display is not in center. The third image is not quite in the center, and it is not 50% as wide as the first and the second image. The fourth image appears shorter in height, but certainly it is not 50% in height.

I stopped here ECLoc2686 P76